<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下单系统</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_564289_d2d5f4zzn3h4zpvi.css">
    <script src="layui/layui.js"></script>
    <style>
        .container{width: 410px;height: 450px;margin: 0 auto;background: #fff}
        .logo{text-align: center;}
        .logo>img{width: 300px;height: 75px;}
        .status>p{text-align: center;margin-bottom: 15px;}
        .status>p>span{color: red}
        .square{width: 306px;height: 302px;margin: 0 auto;border-top: 1px solid #eee;border-left: 1px solid #eee;}
        .square>ul{}
        .square>ul>li{width: 100px;height: 100px;float: left;border: 1px solid #eee;cursor: pointer;}
        li[li-index]:hover{border-color: #eee;transition: all .8s;}
        li[li-index='1']:hover{background: #44CC00;transition: all .8s;color: #fff;}
        li[li-index='2']:hover{background: #EA5A49;transition: all .8s;color: #fff;}
        li[li-index='3']:hover{background: #FFBD17;transition: all .8s;color: #fff;}
        li[li-index='4']:hover{background: #00A6AD;transition: all .8s;color: #fff;}
        li[li-index='5']:hover{background:#11C1F3;transition: all .8s;color: #fff;}
        li[li-index='6']:hover{background: #484746;transition: all .8s;color: #fff;}
        li[li-index='7']:hover{background: #B5B5B5;transition: all .8s;color: #fff;}
        li[li-index='8']:hover{background: #009688;transition: all .8s;color: #fff;}
        li[li-index='9']:hover{background: #2F4056;transition: all .8s;color: #fff;}
        .icon{text-align: center;width: 100%;margin-top: 15px;}
        .tag{text-align: center;}
        .icon>i{font-size: 45px;}
        #console>p>span{color: #008ac1;}
    </style>
</head>
<body>
<div class="layui-fluid">
    <!--layui-row start-->
    <div class="layui-row">
        <div class="layui-col-sm5">
            <div class="container">
                <div class="logo">
                    <img src="https://p.qlogo.cn/bizmail/ic909hNnRibYXUUsicxwEKyia2mGiad7G6VGx5xYEP3qHoOib0vBUSLW2Ngg/0" alt="logo">
                </div>
                <div class="status">
                    <p>系统执行状态:<span id="status-msg"></span></p>
                </div>
                <div class="square">
                    <ul>
                        <li li-index="1"></li>
                        <li li-index="2"></li>
                        <li li-index="3"></li>
                        <li li-index="4"></li>
                        <li li-index="5" title="启动/停止" data-status="0">
                            <div class="icon">
                                <i class="iconfont icon-qidong"></i>
                            </div>
                            <div class="tag">启动</div>
                        </li>
                        <li li-index="6"></li>
                        <li li-index="7"></li>
                        <li li-index="8"></li>
                        <li li-index="9">
                            <div class="icon">
                                <i class="iconfont icon-tianjiajiahaowubiankuang"></i>
                            </div>
                            <div class="tag">添加</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-sm7">
            <div class="layui-card">
                <div class="layui-card-header">系统启动日志</div>
                <div class="layui-card-body" id="console" style="height: 420px;overflow-y: scroll;">
                    <!--<p>2018-06-09 11:05:33: 服务器连接成功...</p>-->
                </div>
            </div>
        </div>
    </div>
    <!--layui-row end-->
</div>

<script>
    layui.use(['layer','jquery','util'],function () {
        var $ = layui.jquery, layer = layui.layer, util = layui.util;
        var websocket = null;

        $("li[li-index=5]").click(function () {
            var status = $("[li-index=5]").attr('data-status');
            websocket.send(status);
            return false;
        });

        if ('WebSocket' in window){
            websocket = new WebSocket("ws://localhost:8080/zs/websocket");
        }else{
            alert("当前浏览器不支持WebSocket")
        }

        websocket.onopen = function (ev) {
            layer.msg("服务器连接成功");
            console.log('服务器连接成功')
            console.log(ev)
        }

        websocket.onmessage = function (ev) {
            var data = JSON.parse(ev.data);
            console.log(data);
            if (data.code == 0){                // 任务执行中
                $("#status-msg").html(data.msg);
            }else if (data.code == 10002) {     // 任务未创建
                $("#status-msg").html(data.msg);
            }
            $("[li-index=5]").attr('data-status',data.code);
            $("#console").append("<p><span>"+util.toDateString(new Date(),'yyyy-MM-dd HH:mm:ss')+"</span> "+data.msg+"...</p>");
        }

        websocket.onclose = function (ev) {
            console.log('onclose')
            console.log(ev)
        }

        websocket.onerror = function (ev) {
            console.log('onerror')
            console.log(ev)
        }
    });
</script>
</body>
</html>